<template>
  <div class="map-grid-container">
    <div ref="chartRef" class="chart-container"></div>

    <!-- 完全自定义的信息面板布局 -->
    <div ref="infoPanel" class="custom-info-panel" v-if="showInfoPanel">
      <div class="panel-header">
        <h3 ref="panelTitle"></h3>
        <div class="panel-color-indicator" ref="colorIndicator"></div>
      </div>
      <div class="panel-content">
        <div class="info-row">
          <span class="info-label">经度范围:</span>
          <span class="info-value" ref="lonRange"></span>
        </div>
        <div class="info-row">
          <span class="info-label">纬度范围:</span>
          <span class="info-value" ref="latRange"></span>
        </div>
        <div class="info-row">
          <span class="info-label">透明度:</span>
          <span class="info-value" ref="opacityValue"></span>
        </div>
        <div class="info-row" v-if="isCustomRegion">
          <span class="info-label">类型:</span>
          <span class="info-value">自定义区域</span>
        </div>
      </div>
      <div class="panel-footer">
        <small>鼠标移开区域可关闭此面板</small>
      </div>
    </div>

    <div class="controls">
      <!-- 控制面板内容保持不变 -->
      <button @click="toggleGrid" class="control-btn">
        {{ isGridVisible ? "隐藏网格" : "显示网格" }}
      </button>
      <button @click="toggleDensity" class="control-btn">
        {{ isHighDensity ? "降低密度" : "提高密度" }}
      </button>
      <button @click="toggleMap" class="control-btn">
        {{ showMap ? "隐藏地图" : "显示地图" }}
      </button>
      <button @click="toggleRegionFill" class="control-btn">
        {{ showRegionFill ? "隐藏区域填充" : "显示区域填充" }}
      </button>

      <div class="region-selector">
        <label>选择要显示的区域: </label>
        <div class="checkbox-group">
          <label class="checkbox-item">
            <input
              type="checkbox"
              v-model="selectedRegions"
              value="neimenggu"
            />
            内蒙古
          </label>
          <label class="checkbox-item">
            <input type="checkbox" v-model="selectedRegions" value="xinjiang" />
            新疆
          </label>
          <label class="checkbox-item">
            <input type="checkbox" v-model="selectedRegions" value="qinghai" />
            青海
          </label>
          <label class="checkbox-item">
            <input type="checkbox" v-model="selectedRegions" value="beijing" />
            北京
          </label>
          <label class="checkbox-item">
            <input
              type="checkbox"
              v-model="selectedRegions"
              value="chongqing"
            />
            重庆
          </label>
        </div>
      </div>

      <div v-if="showCustomRegion" class="custom-region-settings">
        <h4>自定义区域范围</h4>
        <label>最小经度: </label>
        <input
          type="number"
          v-model.number="customRegion.minLon"
          step="0.5"
          @change="updateRegionFill"
          min="73"
          max="135"
        />
        <label>最大经度: </label>
        <input
          type="number"
          v-model.number="customRegion.maxLon"
          step="0.5"
          @change="updateRegionFill"
          min="73"
          max="135"
        />
        <label>最小纬度: </label>
        <input
          type="number"
          v-model.number="customRegion.minLat"
          step="0.5"
          @change="updateRegionFill"
          min="18"
          max="53"
        />
        <label>最大纬度: </label>
        <input
          type="number"
          v-model.number="customRegion.maxLat"
          step="0.5"
          @change="updateRegionFill"
          min="18"
          max="53"
        />
        <button @click="toggleCustomRegion" class="control-btn small-btn">
          {{ showCustomRegion ? "隐藏自定义区域" : "显示自定义区域" }}
        </button>
      </div>

      <button @click="toggleCustomRegion" class="control-btn">
        {{ showCustomRegion ? "关闭自定义区域" : "添加自定义区域" }}
      </button>

      <div class="grid-settings">
        <label>中心点经度: </label>
        <input
          type="number"
          v-model.number="centerLon"
          step="0.5"
          @change="updateGrid"
          min="73"
          max="135"
        />
        <label>中心点纬度: </label>
        <input
          type="number"
          v-model.number="centerLat"
          step="0.5"
          @change="updateGrid"
          min="18"
          max="53"
        />
        <label>网格大小(度): </label>
        <input
          type="number"
          v-model.number="gridSize"
          step="0.5"
          min="0.5"
          @change="updateGrid"
        />
        <label>可见范围(度): </label>
        <input
          type="number"
          v-model.number="visibleRange"
          step="5"
          min="10"
          max="60"
          @change="updateGrid"
        />
        <button @click="toggleAxes" class="control-btn">
          {{ showAxes ? "隐藏经纬度" : "显示经纬度" }}
        </button>
      </div>

      <div class="region-colors">
        <h4>区域颜色设置</h4>
        <div
          v-for="regionKey in Object.keys(presetRegions)"
          :key="regionKey"
          class="color-item"
        >
          <label>{{ presetRegions[regionKey].name }}: </label>
          <input
            type="color"
            v-model="regionColors[regionKey]"
            @change="updateRegionFill"
          />
          <input
            type="range"
            v-model.number="regionOpacities[regionKey]"
            min="0.1"
            max="1"
            step="0.1"
            @change="updateRegionFill"
          />
          <span>{{ regionOpacities[regionKey] }}</span>
        </div>

        <div class="color-item">
          <label>自定义区域: </label>
          <input
            type="color"
            v-model="regionColors.custom"
            @change="updateRegionFill"
          />
          <input
            type="range"
            v-model.number="regionOpacities.custom"
            min="0.1"
            max="1"
            step="0.1"
            @change="updateRegionFill"
          />
          <span>{{ regionOpacities.custom }}</span>
        </div>
      </div>

      <div class="info">
        <p>当前网格: {{ currentGridCount }}×{{ currentGridCount }}</p>
        <p>线宽: {{ lineWidth }}px</p>
        <p v-if="showRegionFill && selectedRegions.length">
          显示区域: {{ getRegionNames().join(", ") }}
          <span v-if="showCustomRegion">, 自定义区域</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, nextTick, computed } from "vue";
import * as echarts from "echarts";
import chinaJson from "@/assets/china.json"; // 导入中国地图JSON数据

// 组件状态
const chartRef = ref(null);
const chart = ref(null);
const isGridVisible = ref(true);
const isHighDensity = ref(false);
const showAxes = ref(false);
const showMap = ref(true);

// 自定义信息面板相关状态和引用
const showInfoPanel = ref(false);
const isCustomRegion = ref(false);
const infoPanel = ref(null);
const panelTitle = ref(null);
const colorIndicator = ref(null);
const lonRange = ref(null);
const latRange = ref(null);
const opacityValue = ref(null);

// 区域填充相关状态
const showRegionFill = ref(true);
const selectedRegions = ref(["beijing", "chongqing"]); // 默认显示北京和重庆
const showCustomRegion = ref(false);

// 区域颜色和透明度设置
const regionColors = ref({
  neimenggu: "#ff0000",
  xinjiang: "#00ff00",
  qinghai: "#0000ff",
  beijing: "#ffff00",
  chongqing: "#ff00ff",
  custom: "#00ffff",
});

const regionOpacities = ref({
  neimenggu: 0.3,
  xinjiang: 0.3,
  qinghai: 0.3,
  beijing: 0.5, // 北京透明度稍高
  chongqing: 0.5, // 重庆透明度稍高
  custom: 0.3,
});

// 预设区域经纬度范围
const presetRegions = {
  neimenggu: {
    name: "内蒙古自治区",
    minLon: 97,
    maxLon: 126,
    minLat: 37,
    maxLat: 53,
  },
  beijing: {
    name: "北京市",
    minLon: 115.42,
    maxLon: 117.5,
    minLat: 39.44,
    maxLat: 41.05,
  },
  chongqing: {
    name: "重庆市",
    minLon: 105.1,
    maxLon: 110.2,
    minLat: 28.1,
    maxLat: 32.2,
  },
  xinjiang: {
    name: "新疆维吾尔自治区",
    minLon: 73.4,
    maxLon: 96.3,
    minLat: 34.2,
    maxLat: 49.2,
  },
  qinghai: {
    name: "青海省",
    minLon: 89.4,
    maxLon: 103.1,
    minLat: 31.3,
    maxLat: 39.3,
  },
};

// 自定义区域设置
const customRegion = ref({
  minLon: 100,
  maxLon: 110,
  minLat: 30,
  maxLat: 40,
});

// 网格配置
const centerLon = ref(105);
const centerLat = ref(35);
const gridSize = ref(2);
const visibleRange = ref(30);
const baseGridCount = 100;

// 计算当前实际显示的网格数量
const currentGridCount = computed(() => {
  return isHighDensity.value ? baseGridCount : Math.floor(baseGridCount / 5);
});

// 线宽计算
const lineWidth = computed(() => {
  return isHighDensity.value ? 0.5 : 1;
});

// 获取当前选中区域的名称
const getRegionNames = () => {
  return selectedRegions.value
    .map((regionKey) => {
      return presetRegions[regionKey]?.name || "";
    })
    .filter((name) => name);
};

// 定位自定义信息面板
const positionInfoPanel = (event) => {
  if (!infoPanel.value || !chartRef.value) return;

  const panelEl = infoPanel.value;
  const chartRect = chartRef.value.getBoundingClientRect();

  // 计算位置，避免面板超出图表视口
  let left = event.offsetX + 10;
  let top = event.offsetY + 10;

  // 检查右侧边界
  if (left + panelEl.offsetWidth > chartRect.width) {
    left = event.offsetX - panelEl.offsetWidth - 10;
  }

  // 检查底部边界
  if (top + panelEl.offsetHeight > chartRect.height) {
    top = event.offsetY - panelEl.offsetHeight - 10;
  }

  // 应用位置
  panelEl.style.left = `${left}px`;
  panelEl.style.top = `${top}px`;
};

const gridLines = ref([]);
const isChartReady = ref(false);

// 初始化ECharts实例
onMounted(() => {
  nextTick(() => {
    if (chartRef.value) {
      chart.value = echarts.init(chartRef.value);
      echarts.registerMap("china", chinaJson);
      isChartReady.value = true;

      // 初始化图表和事件监听
      initChart();
      initEventListeners();

      // 绘制网格和区域
      drawGrid();
      nextTick(() => {
        drawRegionFill();
        nextTick(() => {
          drawRegionFill();
        });
      });
    }
  });
});

// 初始化事件监听
const initEventListeners = () => {
  if (!isChartReady.value) return;

  // 鼠标移入区域时显示自定义信息面板
  chart.value.on("mouseover", (params) => {
    if (params.seriesName && params.seriesName.startsWith("regionFill_")) {
      showInfoPanel.value = true;

      // 获取区域信息
      const regionKey = params.seriesName.replace("regionFill_", "");
      let regionName = "自定义区域";
      let region;

      if (regionKey === "custom") {
        region = customRegion.value;
        isCustomRegion.value = true;
      } else {
        region = presetRegions[regionKey];
        regionName = region?.name || regionKey;
        isCustomRegion.value = false;
      }

      // 直接操作DOM元素设置内容（不使用tooltipData）
      if (panelTitle.value) panelTitle.value.textContent = regionName;
      if (colorIndicator.value) {
        colorIndicator.value.style.backgroundColor =
          regionColors.value[regionKey];
        colorIndicator.value.style.opacity = regionOpacities.value[regionKey];
      }
      if (lonRange.value) {
        lonRange.value.textContent = `${region.minLon.toFixed(
          1
        )}°E - ${region.maxLon.toFixed(1)}°E`;
      }
      if (latRange.value) {
        latRange.value.textContent = `${region.minLat.toFixed(
          1
        )}°N - ${region.maxLat.toFixed(1)}°N`;
      }
      if (opacityValue.value) {
        opacityValue.value.textContent = regionOpacities.value[regionKey];
      }

      // 定位信息面板
      positionInfoPanel(params.event);
    }
  });

  // 鼠标移出区域时隐藏自定义信息面板
  chart.value.on("mouseout", (params) => {
    if (params.seriesName && params.seriesName.startsWith("regionFill_")) {
      showInfoPanel.value = false;
    }
  });

  // 鼠标在区域上移动时更新面板位置
  chart.value.on("mousemove", (params) => {
    if (
      showInfoPanel.value &&
      params.seriesName &&
      params.seriesName.startsWith("regionFill_")
    ) {
      positionInfoPanel(params.event);
    }
  });

  // 窗口大小变化时重新定位
  window.addEventListener("resize", () => {
    if (showInfoPanel.value) {
      showInfoPanel.value = false;
    }
  });
};

// 初始化图表配置
const initChart = () => {
  if (!isChartReady.value) return;

  const option = {
    backgroundColor: "#f0f4f7",
    tooltip: {
      show: false, // 禁用默认tooltip
    },
    // 地理坐标系配置
    geo: {
      map: "china",
      show: showMap.value,
      roam: true,
      center: [centerLon.value, centerLat.value],
      zoom: 1.2,
      label: {
        show: false,
        color: "#333",
        fontSize: 12,
      },
      itemStyle: {
        areaColor: "#e6f7ff",
        borderColor: "#91cc75",
        borderWidth: 1,
      },
      emphasis: {
        itemStyle: {
          areaColor: "#b3d9ff",
        },
        label: {
          show: true,
          color: "#000",
        },
      },
    },
    series: [
      // 地图系列
      {
        type: "map",
        map: "china",
        show: showMap.value,
        geoIndex: 0,
        label: {
          show: false,
        },
      },
    ],
  };

  chart.value.setOption(option);
  window.addEventListener("resize", handleResize);
};

// 处理窗口大小变化
const handleResize = () => {
  if (isChartReady.value) {
    chart.value.resize();
  }
};

// 生成网格线数据（保持不变）
const generateGridData = () => {
  const lines = [];
  const halfRange = visibleRange.value;

  const minLon = centerLon.value - halfRange;
  const maxLon = centerLon.value + halfRange;
  const minLat = centerLat.value - halfRange;
  const maxLat = centerLat.value + halfRange;

  const lonLinesCount = Math.min(
    currentGridCount.value,
    Math.ceil((maxLon - minLon) / gridSize.value)
  );
  const latLinesCount = Math.min(
    currentGridCount.value,
    Math.ceil((maxLat - minLat) / gridSize.value)
  );

  // 绘制纬线（水平线）
  for (let i = 0; i <= latLinesCount; i++) {
    const lat = minLat + (maxLat - minLat) * (i / latLinesCount);
    lines.push({
      type: "lines",
      name: `纬线${i}`,
      coordinateSystem: "geo",
      polyline: true,
      lineStyle: {
        width: lineWidth.value,
        color: i % 10 === 0 ? "rgba(255, 0, 0, 0.7)" : "rgba(255, 0, 0, 0.3)",
        type: i % 10 === 0 ? "solid" : "dashed",
      },
      data: [
        [
          [minLon, lat],
          [maxLon, lat],
        ],
      ],
    });

    if (showAxes.value && i % 5 === 0) {
      lines.push({
        type: "scatter",
        name: `纬度标签${i}`,
        coordinateSystem: "geo",
        symbol: "none",
        label: {
          show: true,
          formatter: `${lat.toFixed(1)}°N`,
          fontSize: 10,
          color: "#666",
        },
        data: [[minLon, lat]],
      });
    }
  }

  // 绘制经线（垂直线）
  for (let i = 0; i <= lonLinesCount; i++) {
    const lon = minLon + (maxLon - minLon) * (i / lonLinesCount);
    lines.push({
      type: "lines",
      name: `经线${i}`,
      coordinateSystem: "geo",
      polyline: true,
      lineStyle: {
        width: lineWidth.value,
        color: i % 10 === 0 ? "rgba(0, 0, 255, 0.7)" : "rgba(0, 0, 255, 0.3)",
        type: i % 10 === 0 ? "solid" : "dashed",
      },
      data: [
        [
          [lon, minLat],
          [lon, maxLat],
        ],
      ],
    });

    if (showAxes.value && i % 5 === 0) {
      lines.push({
        type: "scatter",
        name: `经度标签${i}`,
        coordinateSystem: "geo",
        symbol: "none",
        label: {
          show: true,
          formatter: `${lon.toFixed(1)}°E`,
          fontSize: 10,
          color: "#666",
        },
        data: [[lon, minLat]],
      });
    }
  }

  return lines;
};

// 生成单个区域填充数据（保持不变）
const generateSingleRegionFillData = (regionKey, region) => {
  const coordinates = [
    [region.minLon, region.minLat],
    [region.maxLon, region.minLat],
    [region.maxLon, region.maxLat],
    [region.minLon, region.maxLat],
    [region.minLon, region.minLat],
  ];

  return {
    type: "custom",
    name: `regionFill_${regionKey}`,
    coordinateSystem: "geo",
    renderItem: (params, api) => {
      const points = coordinates.map((coord) => api.coord(coord));
      return {
        type: "polygon",
        shape: { points },
        style: {
          fill: regionColors.value[regionKey],
          opacity: regionOpacities.value[regionKey],
          stroke: regionColors.value[regionKey],
          lineWidth: 2,
        },
        emphasis: {
          style: {
            opacity: Math.min(regionOpacities.value[regionKey] + 0.2, 1),
          },
        },
      };
    },
    data: [
      {
        name:
          regionKey === "custom"
            ? "自定义区域"
            : presetRegions[regionKey]?.name,
        value: [
          (region.minLon + region.maxLon) / 2,
          (region.minLat + region.maxLat) / 2,
        ],
        ...region,
      },
    ],
  };
};

// 生成所有选中区域的填充数据（保持不变）
const generateRegionFillData = () => {
  const regions = [];

  selectedRegions.value.forEach((regionKey) => {
    if (presetRegions[regionKey]) {
      regions.push(
        generateSingleRegionFillData(regionKey, presetRegions[regionKey])
      );
    }
  });

  if (showCustomRegion.value) {
    regions.push(generateSingleRegionFillData("custom", customRegion.value));
  }

  return regions;
};

// 绘制网格（保持不变）
const drawGrid = () => {
  if (!isChartReady.value) return;
  gridLines.value = generateGridData();

  const option = chart.value.getOption();

  const nonGridSeries = option.series.filter(
    (series) =>
      series.type === "map" ||
      (series.name && series.name.startsWith("regionFill_"))
  );

  let newSeries = [...nonGridSeries];

  if (isGridVisible.value) {
    newSeries = [...newSeries, ...gridLines.value];
  }

  option.series = newSeries;
  option.geo.show = showMap.value;
  option.geo.center = [centerLon.value, centerLat.value];
  const mapSeries = option.series.find((s) => s.type === "map");
  if (mapSeries) {
    mapSeries.show = showMap.value;
  }

  chart.value.setOption(option, true);
};

// 绘制区域填充（保持不变）
const drawRegionFill = () => {
  if (!isChartReady.value) return;

  const option = chart.value.getOption();

  option.series = option.series.filter(
    (series) => !(series.name && series.name.startsWith("regionFill_"))
  );

  if (showRegionFill.value) {
    const regionFillSeries = generateRegionFillData();
    option.series = [...option.series, ...regionFillSeries];
  }

  chart.value.setOption(option, false);
};

// 各种切换和更新方法（保持不变）
const toggleGrid = () => {
  isGridVisible.value = !isGridVisible.value;
  drawGrid();
};

const toggleDensity = () => {
  isHighDensity.value = !isHighDensity.value;
  drawGrid();
};

const toggleMap = () => {
  showMap.value = !showMap.value;
  drawGrid();
};

const toggleAxes = () => {
  showAxes.value = !showAxes.value;
  drawGrid();
};

const toggleRegionFill = () => {
  showRegionFill.value = !showRegionFill.value;
  drawRegionFill();
};

const toggleCustomRegion = () => {
  showCustomRegion.value = !showCustomRegion.value;
  drawRegionFill();
};

const updateRegionFill = () => {
  if (!isChartReady.value) return;
  drawRegionFill();
};

const updateGrid = () => {
  if (!isChartReady.value) return;
  nextTick(() => {
    drawGrid();
    drawRegionFill();
  });
};

// 监听容器大小变化（保持不变）
watch(
  () => chartRef.value?.clientWidth,
  () => {
    if (isChartReady.value) {
      chart.value.resize();
    }
  }
);

// 监听选中区域变化（保持不变）
watch(
  selectedRegions,
  () => {
    if (isChartReady.value) {
      nextTick(() => {
        drawRegionFill();
      });
    }
  },
  { immediate: true }
);

// 组件卸载时清理（保持不变）
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  if (chart.value) {
    chart.value.off("mouseover");
    chart.value.off("mouseout");
    chart.value.off("mousemove");
    chart.value.dispose();
  }
});
</script>

<style scoped>
.map-grid-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.chart-container {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 自定义信息面板样式 */
.custom-info-panel {
  position: absolute;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  pointer-events: none;
  width: 240px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  transition: all 0.2s ease;
  transform: translateY(5px);
  opacity: 0;
  animation: panelFadeIn 0.2s forwards;
}

@keyframes panelFadeIn {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.panel-header {
  background: #f8f9fa;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.panel-color-indicator {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.panel-content {
  padding: 12px 15px;
}

.info-row {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  color: #666;
  width: 80px;
  flex-shrink: 0;
}

.info-value {
  color: #333;
  flex-grow: 1;
}

.panel-footer {
  background: #f8f9fa;
  padding: 8px 15px;
  border-top: 1px solid #eee;
  font-size: 12px;
  color: #999;
}

/* 控制面板样式保持不变 */
.controls {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  max-width: 300px;
}

.control-btn {
  background: #42b983;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 10px;
  transition: all 0.3s;
  width: 100%;
}

.control-btn.small-btn {
  padding: 4px 8px;
  font-size: 12px;
  margin-top: 10px;
}

.control-btn:hover {
  background: #359e75;
  transform: translateY(-2px);
}

.region-selector {
  margin: 10px 0 20px;
}

.checkbox-group {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.checkbox-item input {
  margin-right: 6px;
}

.custom-region-settings {
  margin: 15px 0;
  padding: 10px;
  background: rgba(240, 240, 240, 0.7);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.custom-region-settings h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #333;
}

.grid-settings {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 15px 0;
}

.grid-settings label {
  font-size: 13px;
  color: #333;
  display: inline-block;
  width: 100px;
}

.grid-settings input {
  width: calc(100% - 110px);
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.region-colors {
  margin: 15px 0;
  padding-top: 10px;
  border-top: 1px dashed #eee;
}

.region-colors h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #333;
}

.color-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}

.color-item input[type="color"] {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #ddd;
}

.color-item input[type="range"] {
  flex: 1;
}

.color-item span {
  width: 30px;
  text-align: right;
  font-size: 12px;
}

.info {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px dashed #eee;
  font-size: 12px;
  color: #666;
}

.info p {
  margin: 5px 0;
}
</style>
